/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from 'react-native';

import CategoryItem from './CategoryItem.js';

export default class MyComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          keyExtractor={this._keyExtractor}
          renderItem = {this._flatListRenderItem}
          data={this.props.categoryData}
          numColumns ={4}
        />
      </View>
    );
  }

  _flatListRenderItem = ({item}) => {
    return(
      <TouchableOpacity
        onPress = {() => this.props.navigation.navigate('Detail', { info: item})}
      >
        <CategoryItem
          cover = {item.cover}
          name = {item.name}
        />
      </TouchableOpacity>
    );
  }
  _keyExtractor = (item, index) => {
    return item.id;
  }
}

const styles = StyleSheet.create({
  container: {
    height:170,
    backgroundColor:'#ffffff',
  },
});
